<template>
  <div>
    <!-- el-row组件用于创建行布局，设置了列间距为5px，以便在一行中合理排列多个el-col组件（列） -->
    <el-row :gutter="5" style="margin-top: 10px;margin-left: 30px">
      <!-- el-col组件用于创建列布局，这里设置列的跨度为4.5，表示该列在一行中占据一定的宽度比例，具体宽度会根据父容器的宽度动态计算 -->
      <el-col :span="4.5">
        <!-- 一个单独的el-card组件，设置了特定的背景颜色、右边距、高度和宽度等样式，用于展示特定数据 -->
        <el-card class="elrow">
          <!-- 在卡片内部使用span标签展示数据，设置了字体大小和颜色等样式 -->
          <div class="amount" >
            <!-- 通过双大括号语法（Vue.js的插值表达式）展示todayDeliveryAmount变量的值，这里应该是用于显示今日派件量的数据 -->
            {{ todayDeliveryAmount }}<br>
            今日派件量
          </div>
          <div class="el-icon-sold-out"></div>
        </el-card>
      </el-col>
      <el-col :span="4.5">
        <el-card class="pack">
          <div class="amount">
            {{ todayPackageAmount }}<br>
            今日寄件量
          </div>
          <div class="el-icon-sell"></div>
        </el-card>
      </el-col>
      <el-col :span="4.5">
        <el-card class="packnum">
          <div class="amount">
            {{ todayDeliveryAmount * 100 }}<br>
            今日派件收入
          </div>
          <div class="el-icon-goods"></div>
        </el-card>
      </el-col>
      <el-col :span="4.5">
        <el-card class="del">
          <div class="amount">
            {{ todayPackageAmount * 80 }}<br>
            今日寄件收入
          </div>
          <div class="el-icon-goods"
               style="color: white;font-size: 100px;position: absolute;top: 30px;left: 1150px;"></div>
        </el-card>
      </el-col>
      <el-col :span="4.5">
        <el-card class="dandp">
          <div class="amount">
            {{ todayDeliveryAmount * 100 + todayPackageAmount * 80 }}<br>
            今日总收入
          </div>
          <div class="el-icon-coin"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="5" style="margin-top: 10px;margin-left: 30px">
      <el-col :span="24" style="width: 1180px">
        <el-card>
          <div id="line" style="width: 100%;height: 400px"></div>
        </el-card>
      </el-col>
      <el-col :span="3" style="width: 400px;margin-left: 20px">
        <el-card>
          <div style="width: 100%;height: 400px">
            当前时间:{{ currentTimeInfo }}
            <div class="hhh">
              {{ todayBoxAmount }}
            </div>
            <span class="shu">今日开箱数</span>
            <span class="xin">每隔一分钟更新数据</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="5" style="margin-top: 10px;margin-left: 30px">
      <el-col :span="24" style="width: 1600px">
        <el-card style="height: 320px">
          <div class="sige">
            <h1>会员状况</h1>
            <h2 style="margin-top: 55px;color: orange">当前<span style="font-size: 30px">{{vipAmount}}</span>会员</h2>
            <h3 style="margin-top: 40px">累计<span style="font-size: 23px">{{courierAmount}}</span>快递员</h3>
            <h3 style="margin-top: 40px">累计<span style="font-size: 23px">{{commonVipNumAmount}}</span>普通会员</h3>
          </div>
          <div class="sige">
            <div id="pie" style="width: 100%;height: 300px;padding-bottom: 20px"></div>
          </div>
          <div class="sige">
            <h2 style="margin-top: 100px;color: orange">昨日新增<span style="font-size: 30px">{{ yesterdayAmount }}</span>会员</h2>
            <h3 style="margin-top: 40px">昨日新增<span style="font-size: 23px">{{ yesterdayCourier }}</span>快递员</h3>
            <h3 style="margin-top: 40px">昨日新增<span style="font-size: 23px">{{ yesterdayCommonVip }}</span>普通会员</h3>
          </div>
          <div class="sige">
            <div id="chartContainer" style="width: 100%;height: 300px;padding-bottom: 20px"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="5" style="margin-top: 10px;margin-left: 30px">
      <el-col :span="24" style="width: 1600px">
        <el-card style="height: 400px">
          <div style="height: 400px">
            <div id="bar" style="width: 100%;height: 100%"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {vipStatistics, StatisticsParcel, StatisticsPackageParcel, listTrend, listPackages, BoxParcel, courierNum, commonVipNum, PidList , yesterdayVip ,ytdci, ytdcv, getChartContainer, machineTrend} from "@/api/other/bulletin";
import * as echarts from 'echarts'

// 定义一个名为option的常量对象，用于配置图表的各项参数
const option = {
  // title配置项用于设置图表的标题相关信息
  title: {
    text: '派件量与寄件量趋势图'
  },
  // tooltip配置项用于设置鼠标悬停在图表元素上时显示的提示信息相关规则
  tooltip: {
    trigger: 'axis',
  },
  // xAxis配置项用于设置图表的x轴相关属性
  xAxis: {
    type: 'category',
    data: [],
    axisLabel: {
      formatter: function (value) {
        return value + "月";
      }
    }
  },
  yAxis: {
    type: 'value'
  },
  legend: {
    data: ['派件量', '寄件量'],
    bottom: 'bottom'
  },
  series: [
    {
      name: '派件量',
      data: [],
      type: 'line',
      smooth: true
    },
    {
      name: '寄件量',
      data: [],
      type: 'line',
      smooth: true
    }
  ]
};

const option1 = {
  title: {
    text: '地区分布统计',
    left: 'center'
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

export default {
  name: "Parcel",
  data() {
    return {
      todayDeliveryAmount: [],
      todayPackageAmount: [],
      todayBoxAmount: [],
      currentTimeInfo: '',
      timer: null,
      intervalId: null,
      vipAmount:[],
      courierAmount:[],
      commonVipNumAmount:[],
      yesterdayAmount:[],
      yesterdayCourier:[],
      yesterdayCommonVip:[]
    };
  },
  methods: {
    initChartContainerEcharts(){
      getChartContainer().then(res =>{
        if (res.code === 200){
          this.initChartContainer(res.data)
        }else {
          this.$message.error(res.msg);
        }
      })
    },
    initChartContainer(data){
      let chartDom = document.getElementById('chartContainer');
      let myChart = echarts.init(chartDom);
      let option;

      // 对传入的数据进行处理，将name的值转换为对应的中文描述
      const processedData = data.map(item => {
        if (item.name === '0') {
          item.name = '快递员';
        } else if (item.name === '1') {
          item.name = '普通会员';
        }
        return item;
      });


      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // 根据数据中的第一个元素的name值来设置orient方向
          orient: processedData.length > 0 && processedData[0].name === '快递员'? 'horizontal' : 'vertical',
          bottom: 'bottom'
        },
        series: [
          {
            type: 'pie',
            radius: '80%',
            data:processedData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },
    tongjiyesterdayCommonVip(){
      ytdcv().then(res =>{
        this.yesterdayCommonVip=res;
      }).catch(error =>{
        console.log(error);
      })
    },
    tongjiyesterdayCourier(){
      ytdci().then(res =>{
        this.yesterdayCourier=res;
      }).catch(error =>{
        console.log(error);
      })
    },
    tongjiyesterdayAmount(){
      yesterdayVip().then(res =>{
        this.yesterdayAmount = res;
      }).catch(error =>{
        console.log(error);
      })
    },
    initEcharts(){
      PidList().then(res =>{
        if (res.code === 200){
          this.initPie(res.data)
        }else {
          this.$message.error(res.msg);
        }
      })
    },
    initPie(data){
      let chartDom = document.getElementById('pie');
      let myChart = echarts.init(chartDom);
      let option;

      // 对传入的数据进行处理，将name的值转换为对应的中文描述
      const processedData = data.map(item => {
        if (item.name === '0') {
          item.name = '快递员';
        } else if (item.name === '1') {
          item.name = '普通会员';
        }
        return item;
      });


      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // 根据数据中的第一个元素的name值来设置orient方向
          orient: processedData.length > 0 && processedData[0].name === '快递员'? 'horizontal' : 'vertical',
          bottom: 'bottom'
        },
        series: [
          {
            type: 'pie',
            radius: '80%',
            data:processedData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },
    tongjicommonVipNum(){
      commonVipNum().then(res =>{
        this.commonVipNumAmount=res;
      }).catch(error=>{
        console.log(error);
      })
    },
    tongjicourier(){
      courierNum().then(res=>{
        this.courierAmount=res;
      }).catch(error=>{
        console.log(error);
      })
    },
    tongjiVip(){
      vipStatistics().then(res=>{
        this.vipAmount=res;
      }).catch(error=>{
        console.log(error);
      })
    },
    updateData() {
      // 这里假设你有对应的方法来获取最新的当前时间信息和今日开箱数数据
      // 比如通过调用后端API等方式
      // 以下是示例的获取方式，实际需替换为真实的获取逻辑
      this.getCurrentTime();
      this.tongjiBox();
    },
    getCurrentTime() {
      // 这里实现获取当前时间信息的具体逻辑，比如调用后端API或者使用JavaScript的Date对象获取当前时间并格式化
      // 示例：使用Date对象获取当前时间并格式化为字符串
      this.currentTimeInfo = new Date().toLocaleString();
    },
    tongjiBox() {
      // 调用StatisticsParcel函数，这个函数应该是一个异步操作，然后处理获取到数据后的逻辑
      BoxParcel().then(response => {
        // 将从StatisticsParcel函数获取到的响应数据赋值给todayDeliveryAmount变量，以便在模板中展示今日派件量的数据
        this.todayBoxAmount = response;
      }).catch(error => {
        // 如果在调用StatisticsParcel函数过程中出现错误，将错误信息打印到控制台，以便进行调试
        console.log(error);
      })
    },
    startTimer() {
      this.timer = setInterval(() => {
        this.getCurrentTimeInfo();
      }, 1000);
    },
    stopTimer() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    getCurrentTimeInfo() {
      const now = new Date();

      const year = now.getFullYear();
      const month = now.getMonth() + 1; // 月份是从0开始计数的，所以要加1
      const day = now.getDate();
      const weekday = now.getDay(); // 0代表星期日，1代表星期一，以此类推
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();

      const weekdayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

      this.currentTimeInfo = `
        ${year}-${month}-${day}
        ${weekdayNames[weekday]}
        ${hours}:${minutes}:${seconds}
      `;
    },
    tongjiPackage() {
      // 调用StatisticsParcel函数，这个函数应该是一个异步操作，然后处理获取到数据后的逻辑
      StatisticsPackageParcel().then(response => {
        // 将从StatisticsParcel函数获取到的响应数据赋值给todayDeliveryAmount变量，以便在模板中展示今日派件量的数据
        this.todayPackageAmount = response;
      }).catch(error => {
        // 如果在调用StatisticsParcel函数过程中出现错误，将错误信息打印到控制台，以便进行调试
        console.log(error);
      })
    },
    tongji() {
      // 调用StatisticsParcel函数，这个函数应该是一个异步操作，然后处理获取到数据后的逻辑
      StatisticsParcel().then(response => {
        // 将从StatisticsParcel函数获取到的响应数据赋值给todayDeliveryAmount变量，以便在模板中展示今日派件量的数据
        this.todayDeliveryAmount = response;
      }).catch(error => {
        // 如果在调用StatisticsParcel函数过程中出现错误，将错误信息打印到控制台，以便进行调试
        console.log(error);
      })
    }
  },
  beforeDestroy() {
    this.stopTimer();
    // 在组件销毁前清除定时器，避免内存泄漏
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  },
  mounted() {
    this.startTimer();
    this.getCurrentTimeInfo();
    this.tongji();
    this.tongjiPackage();
    this.tongjiBox();
    this.tongjiVip();
    this.tongjicourier();
    this.tongjicommonVipNum();
    this.initEcharts();
    this.tongjiyesterdayCommonVip();
    this.tongjiyesterdayCourier();
    this.tongjiyesterdayAmount();
    this.initChartContainerEcharts();

    //等待页面的元素全部加载完成之后再初始化
    let linetDom = document.getElementById("line");
    let lineChart = echarts.init(linetDom);

    let chartDom = document.getElementById('bar');
    let myChart = echarts.init(chartDom);


    machineTrend().then(res => {
      // 将获取到的月份数据填充到x轴
      option1.xAxis.data = res.rows.map(item => item.sf) || [];
      console.log("地区数据：" + res.rows.map(item => item.sf));

      // 分别将派件量和寄件量的数据填充到对应的系列数据中
      option1.series[0].data = res.rows.map(item => item.count) || [];
      console.log("数据：" + res.rows.map(item => item.count));
      myChart.setOption(option1);
      console.log("柱状图："+myChart);
    })


    listTrend().then(res => {
      // 将获取到的月份数据填充到x轴
      option.xAxis.data = res.rows.map(item => item.month) || [];

      // 分别将派件量和寄件量的数据填充到对应的系列数据中
      option.series[0].data = res.rows.map(item => item.num) || [];
      // option.series[1].data = res.rows?.map(item => item.寄件量) || [];
      lineChart.setOption(option)
    })

    listPackages().then(res => {
      option.series[1].data = res.rows.map(item => item.nums) || [];
      lineChart.setOption(option)
    })

    // 在组件挂载时开始定时更新数据
    this.intervalId = setInterval(() => {
      this.updateData();
    }, 60000); // 60000毫秒即一分钟
  },
};
</script>
<style scoped>
/* 针对el-card组件的样式定义，设置了上边距为5px，用于调整卡片在页面中的垂直间距 */
.el-card {
  margin-top: 5px;
}
.hhh {
  margin-top: 70px;
  margin-left: 70px;
  width: 200px;
  height: 200px;
  border: 3px solid cornflowerblue;
  border-radius: 150px;
  text-align: center;
  line-height: 150px;
  font-size: 60px;
  color: orange;
}
.shu {
  position: absolute;
  right: 244px;
  bottom: 167px;
  font-size: 20px;
}
.xin {
  position: absolute;
  right: 232px;
  bottom: 34px;
  font-size: 13px;
  color: darkgray;
}
.elrow{
  background-color:#5656ff;
  margin-right:20px;
  height:150px;
  width:300px;
  padding-top: 30px;
  float: right
}
.amount{
  font-size: 20px;
  color:#E6E6FA
}
.el-icon-sold-out{
  color: white;
  font-size: 100px;
  position: absolute;
  top: 30px;
  left: 160px;
}
.el-icon-sell{
  color: white;
  font-size: 100px;
  position: absolute;
  top: 30px;
  left: 495px;
}
.el-icon-goods{
  color: white;
  font-size: 100px;
  position: absolute;
  top: 30px;
  left: 820px;
}
.el-icon-coin{
  color: white;
  font-size: 100px;
  position: absolute;
  top: 30px;
  left: 1460px;
}
.dandp{
  background-color:#ffaa00;
  margin-right:20px;
  height:150px;
  width:300px;
  padding-top: 30px;
}
.pack{
  background-color:#67e1e5;
  margin-right:20px;
  height:150px;
  width:300px;
  padding-top: 30px;
}
.packnum{
  background-color:#e24a4a;
  margin-right:20px;
  height:150px;
  width:300px;
  padding-top: 30px;
}
.del{
  background-color:#39cea1;
  margin-right:20px;
  height:150px;
  width:300px;
  padding-top: 30px;
}
.sige{
  width: 378px;
  height: 100%;
  float: left;
  margin-right: 10px;
}
</style>

